<template>
  <!-- http://localhost:10001/#/purchase/initialvalue_supplier -->
  <div>
    <!-- 导入 -->
    <el-dialog title="导入" width="500px" :visible.sync="daoru">
      <el-row :gutter="20">
        <el-col :span="6" style="text-align: right">下载模板：</el-col>
        <el-col :span="15">
          <el-link :underline="false">点击下载</el-link>
          <!-- /purchase/supplier/export/modelexcel -->
          <el-link
            type="primary"
            :href="neturl + '/purchase/supplier/export/modelexcel'"
            :underline="false"
          >
            供应商基础模块
          </el-link>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6" style="text-align: right">选择上传文件：</el-col>
        <el-col :span="15">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="neturl + '/purchase/supplier/importData'"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">
              选取文件
            </el-button>
            <!-- <div slot="tip" class="el-upload__tip"></div> -->
          </el-upload>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="daoru = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-row :gutter="10" style="margin-bottom: 20px; margin-top: 10px">
      <el-col :span="2" style="text-align: right">
        <div style="margin-top: 8px">搜索:</div>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="供应商名称/联系人/联系方式"></el-input>
      </el-col>
      <el-col :span="14">
        <el-button type="primary">查询</el-button>
        <el-button type="primary" plain @click="funcadd">新增</el-button>
        <!-- <el-button @click="daochufunc">
          导出
          </el-button> -->
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px">
      <el-col>
        <!-- <el-button plain @click="daoru = true">批量导入</el-button> -->
        <!-- <el-checkbox style="float: right;" v-model="checked">不显示禁用账号</el-checkbox> -->
      </el-col>
    </el-row>
    <el-table :data="tableData" max-height="560" border style="width: 100%">
      <el-table-column prop="id" label="供应商编号"></el-table-column>
      <el-table-column prop="name" label="供应商名称">
        <template slot-scope="scope">
          <span class="no_Code" @click="goDetail(scope.row)">
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="contact" label="联系人"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="addr" label="地址"></el-table-column>
      <el-table-column prop="sysName" label="绑定账号">
        <template slot-scope="scope">
          <!-- 状态这里可以改 -->
          {{ usersDict[scope.row.sysId] | formatUserName }}
        </template>
      </el-table-column>
      <el-table-column prop="statusName" label="禁用状态">
        <template slot-scope="scope">
          {{ statusEnum[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" prop="zip" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            @click="
              $router.push(
                '/purchase/initialvalue/supplier/binduser/' + scope.row.id
              )
            "
            size="small"
            type="text"
          >
            绑定账号
          </el-button>
          <el-button
            style="display: none"
            @click="
              $router.push(
                '/purchase/initialvalue/supplierbasicdetails/' + scope.row.id
              )
            "
            size="small"
            type="text"
          >
            详情
          </el-button>
          <el-button
            @click="
              $router.push(
                '/purchase/initialvalue/supplierbasicedit/' + scope.row.id
              )
            "
            size="small"
            type="text"
          >
            编辑
          </el-button>
          <el-button
            @click="disableSupplier(scope.row.id, scope.row.status)"
            size="small"
            type="text"
          >
            {{ disableButtonText[scope.row.status] }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import netconfig from '@/config/net.config.js'
import { getSupplierList } from '@/api/purchase/purchase_supplier.js'
import {
  delsupplier,
  getstatusenum,
  changeSupplierStatus,
  listsysusers,
} from '@/api/purchase/supplierapi.js'
import { getGoodsQuery } from '@/api/goodslist'
export default {
  data() {
    return {
      checked: false,
      neturl: '', //请求地址
      daoru: false, //控制导入
      total: 0, //表格总数
      statusEnum: {},
      disableButtonText: { 1: '禁用', 0: '启用' },
      usersDict: {},
      pagesize: 10, //当前每页显示条数
      currentPage: 1, //当前页数
      tableData: [], //显示的数据
      dataFilter: {
        //name: '',
      },
    }
  },
  async mounted() {
    this.neturl = netconfig.baseURL
    await this.fetchSysUsers()
    await this.getStatusEnum()
    await this.getList()
  },
  filters: {
    formatUserName: function (username) {
      return username ? username : '未绑定'
    },
  },
  methods: {
    fileList() {},
    daochufunc() {
      window.location.href =
        this.neturl + '/purchase/supplier/export/modelexcel'
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.daoru = false
      this.getList()
    },
    async fetchSysUsers() {
      let res = await listsysusers()
      this.users = res.data.list
      for (let i = 0; i < this.users.length; i++) {
        this.usersDict[this.users[i].id] = this.users[i].username
      }
    },
    async getStatusEnum() {
      let res = await getstatusenum({})
      this.statusEnum = res.data
    },
    async getList() {
      this.listLoading = true
      let res = await getSupplierList(
        this.pagesize,
        this.currentPage,
        this.dataFilter
      )
      this.total = res.total
      this.tableData = res.list
      this.listLoading = false
    },

    goDetail(item) {
      this.$router.push({
        path:
          '/purchase/initialvalue/supplierbasicedit/' + item.id + '?item=' + 1,
      })
    },
    funcadd() {
      // alert(1)
      this.$router.push('/purchase/initialvalue/supplieradd')
    },
    async handleSizeChange(val) {},
    async handleCurrentChange(page) {
      this.currentPage = page
      await this.getList()
    },
    async triggerChangeSupplierStatus(id, status) {
      let res = await changeSupplierStatus({ id: id, status: status })
      if (res.status == 200) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.getList()
      } else {
        this.$message({
          message: '操作失败',
          type: 'error',
        })
      }
    },
    disableSupplier(id, status) {
      this.$confirm('确认要进行此操作？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
          this.triggerChangeSupplierStatus(id, status)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作!',
          })
        })
    },
  },
}
</script>

<style>
.no_Code {
  color: #1890ff;
  cursor: pointer;
}
</style>
